<template>
	<view>
		<view class="content">
			<view class="titleInfo">优选好剧</view>
			<view class="infoContent">
				<view class="info" v-for="(item,index) in dataObject.lists" :key="index" @click="clickToItem(item)">
					<view class="info_cover">
						<image class="image" :src="item.thumbnail||item.cover" mode="aspectFill"></image>
					</view>
					<view class="info_text">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				
			}
		},
		props:{
			dataObject: {
				type: Object,
				default: function(){
					return []
				}
			},
		},
		methods: {
			clickToItem(item) {
				this.$emit("clickToItem", item)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		margin: 0px 15px;
		margin-bottom: 15px;
		border-radius: 10px;
		// box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
		
		.titleInfo {
			display: flex;
			box-sizing: border-box;
			margin: 15px;
			font-size: 18px;
			font-weight: 500;
		}
		.infoContent{
			display: flex;
			flex: 1;
			box-sizing: border-box;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			margin: 0px 5px;
			// background-color: red;
			
			.info{
				width: 33.3%;
				justify-content: center;
				margin-bottom: 10px;
				overflow: hidden;
				// background-color: greenyellow;
								
				.info_cover{
					flex-shrink: 0;
					display: flex;
					box-sizing: border-box;
					margin: 0px 20rpx;
					height: 240rpx;
					.image{
						width: 100%;
						height: 100%;
						border-radius: 10px;
						// background-color: orange;
					}
				}
				.info_text {
					font-size: 14px;
					margin: 5px 3px 0px 3px;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>